<template>
    <div class=" wrap-table user-p8">
        <div class="headerTop_ukl">
            <ul class="clearfix">
                <li>
                    <p class="p1"><img src="../../assets/images/icon_yanjiuduixiang.png" alt=""/><span>研究对象</span></p>
                    <p class="p3">{{userBasic.Surname}}({{userBasic.ResearchNo}})</p>
                </li>
                <li>
                    <p class="p1"><img src="../../assets/images/icon_ganyuzu.png" alt=""/>{{userBasic.GroupType |GroupType}}</p>
                    <p  class="p3" v-if="userBasic.Period!='3'"><span v-if="userBasic.GroupType==1">{{userBasic.IntensityOfIntervention |IntensityOfIntervention}}</span></p>
                    <p  class="p3" v-else><span v-if="userBasic.GroupType==1">{{userBasic.ChildIntensityOfIntervention |IntensityOfIntervention}}</span></p>
                </li>
                <li>
                    <p class="p1"><img src="../../assets/images/icon_huaiyunqi.png" alt=""/>{{userBasic.Period |Period}}</p>
                    <p class="p3"><span v-if="userBasic.Period==2">预产期：{{userBasic.ExpectedDate}},{{userBasic.PregnancyWeek}}</span></p>
                     <p class="p3"><span v-if="userBasic.Period==3">出生日期：{{userBasic.ChildBirthDate}},{{userBasic.ChildAge}}, {{userBasic.ChildSex|ChildSex}} </span></p>
                        <p class="p3"><span v-if="userBasic.Period==4">出生日期：{{userBasic.ChildBirthDate}},{{getChildAge2(userBasic.ChildBirthDate)}}, {{userBasic.ChildSex|ChildSex}} </span></p>
                </li>
            </ul>
        </div>
        <div class="center-waps">
            <el-button @click="CreateTable('EPDS爱丁堡产后抑郁量表',2)">EPDS爱丁堡产后抑郁量表</el-button>
            <el-button  @click="CreateTable('PHQ-9抑郁症筛查量表',1)">PHQ-9抑郁症筛查量表</el-button>
            <el-button  @click="CreateTable('GAD-7广泛性焦虑量表',3)">GAD-7广泛性焦虑量表</el-button>
        </div>
        <!---->
        <template>
            <el-table
                    :data="tableData"
                    border
                    v-loading="loading"
                    height="500"
                    element-loading-text="加载中"
                    :default-sort = "{prop: 'CreateTime', order: 'descending'}"
                    style="width: 100%"
                    >
                <el-table-column
                        prop="Type"
                        align="center"
                        :formatter="TypeFilter"
                        label="量表类型"
                        min-width="120">
                </el-table-column>
                 <el-table-column
                        prop="Creater"
                        label="操作人员"
                        :show-overflow-tooltip="true"
                        sortable
                        align="center"
                        min-width="120">
                </el-table-column>
                <el-table-column
                        prop="CreateTime"
                        label="生成时间"
                        :show-overflow-tooltip="true"
                        sortable
                        align="center"
                        min-width="120">
                </el-table-column>
                
                <el-table-column
                        prop="FillInTime"
                        label="填写时间"
                        align="center"
                        :show-overflow-tooltip="true"
                        min-width="120">
                </el-table-column>
                <el-table-column
                        prop="Period"
                        align="center"
                        :formatter="PeriodFilter"
                        label="当时研究阶段"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        prop="Score"
                        align="center"
                        label="总分"
                        min-width="60">
                </el-table-column>
                <el-table-column
                        prop="Score"
                        align="center"
                        label="结果建议"
                        :formatter="ScoreFilter"
                        :show-overflow-tooltip="true"
                        min-width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        fixed="right"
                        label="操作"
                        min-width="60">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" label="查看"  @click="handleEdit(scope.$index, scope.row)">
                            详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-dialog :title="title" :visible.sync="dialogForm1" width="50%" top="5vh" :close-on-click-modal="false">
            <div style="height: 60vh;overflow-y: scroll">
                <p class="dialog-p-title">{{dialogTitle}}</p>
                <p class="dialog-p-content">{{dialogContent}}</p>
                <div v-for="(item,index) in lists" class="dialog-div" :key="index*1.111">
                    <p class="dialog-p1">{{index+1}}.{{item.name}}</p>
                    <el-radio-group v-model="item.AnswerScore">
                        <el-radio v-for="(op,sortIndex) in item.list" :label="op.value" :key="op.value"
                                  @change="changeRadio(item,sortIndex)">
                            {{op.title}}
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogForm1 = false">取 消</el-button>
                <el-button type="primary" @click="handleSure">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {mapGetters} from 'vuex'
import healthJSON from './healthJson.js'
import {getChildAge2} from '@/utils/index'
import {filterPeriod,filterIntensityOfIntervention} from '@/utils/localDic'
export default {
    name:'userP1',
    data() {
        return {
            tableData:[],
            pageId:1,
            total:null,
            radio2:'',
            loading:false,
            pageSize:10,
            dialogForm1:false,
            innerVisible:false,
            Period:'',
            maxHeight:'',
            topMAX:'5',
            itemType:'',
            sysId:'',
            mobile:'',
            researchNo:'',
            userBasic:{
                Surname:'',
                ResearchNo:'',
                ExpectedDate:'',
                Period:'',
                IntensityOfIntervention:'',
                GroupType:''
            },
            changeVal:'2',
            FillInDate:'',
            PeriodFilter(row, column, cellValue, index){
                return filterPeriod(cellValue)
            },
            IsReadFilter(row, column, cellValue, index){
                return cellValue==1?'已读':'未读'
            },
            TypeFilter(row, column, cellValue, index){
                return cellValue==1?'抑郁症筛查量表':cellValue==2?'爱丁堡产后抑郁量表':'广泛性焦虑量表'
            },
            CreateTimeFilter:function(row, column, cellValue, index){
                if(Object.prototype.toString.call(cellValue)=='[object String]'){
                    return cellValue.substring(0,10)
                }
            },
            ScoreFilter(row, column, cellValue, index){
                let advice=''
                if(row.Type==1 && cellValue!=undefined){
                    if(cellValue<=4){
                        advice='没有抑郁'
                    }
                    else if(cellValue>=5 &&cellValue<=9){
                        advice='可能轻度抑郁'
                    }
                    else if(cellValue>=10 &&cellValue<=14){
                        advice='可能有中度抑郁，建议转诊精神科专科医生'
                    }
                    else{
                        advice='可能有重度抑郁 ，建议转诊精神科专科医生'
                    }
                }
                else if(row.Type==2 &&cellValue!=undefined){
                    if(cellValue>=10){
                        advice='继续进行PHQ-9评分'
                    }
                    else{
                        advice='-'
                    }
                }
                else if(row.Type==3&&cellValue!=undefined){

                    if(cellValue<=4){
                        advice='没有焦虑'
                    }
                    else if(cellValue>=5 &&cellValue<=9){
                        advice=' 可能轻度焦虑'
                    }
                    else if(cellValue>=10 &&cellValue<=14){
                        advice='可能有中度焦虑，建议转诊精神科专科医生'
                    }
                    else{
                        advice='可能有重度焦虑，建议转诊精神科专科医生'
                    }
                }
                return advice
            },
            rowlist:[],
            title:'',
            lists:[],
            headerArr:['抑郁症筛查量表','爱丁堡产后抑郁量表','广泛性焦虑量表'],
            titleArr:['我们接下来会问您一些关于您是否存在抑郁症状及其程度的问题。您是否愿意回答这些问题？（如果是，请您回答所有的问题）','我们接下来要问您一些备孕妇女可能的抑郁和焦虑症状的问题，这并不是用来做诊断，您是否愿意回答这些问题？（如果是，请您回答所有的问题）','我们现在会问您一些关于您是否存在广泛性焦虑症状及其程度的问题。您是否愿意回答这些问题？（如果是，请您回答所有的问题）'],
            contentArr:['在过去的两个星期，有多少时候您受到以下任何问题所困扰？','请选择最能反应您过去七天感受的一个答案，而不仅仅是您今天的感受','在过去的两个星期内，您有多少次受到下列情况的干扰？'],
            dialogTitle:'',
            dialogContent:'',
            dataObj:''
        }
    },
    components:{
       
    },
    props:{
        changeIndex:{
            type: String,
        }
    },
    beforeMount:function() {
        let that=this;
        let appHeight=$(window).height();
        let autoheight=(appHeight-300)+'px'
        that.maxHeight=autoheight
    },
    watch:{
        changeIndex:function(index){
            if(index=='10'){
                this.getList()
            }
        },
        lists:{    //computed  是否显示抑郁症最后一题
            handler(newVal,oldVal){
                let that=this;
                if(that.dataObj.Type==1){
                    let isLoad=newVal.some((val)=>{
                        return val.AnswerScore===undefined   //全部选中
                    })
                    if(!isLoad || newVal.length==10){
                        let allScore=0;
                        newVal.map(function(val,index){
                            if(val.AnswerScore && !isNaN(val.AnswerScore)){
                                allScore+=parseInt(val.AnswerScore)
                            }
                        })
                        if(allScore!=0 && newVal.length==9){
                            var opopItem={name:"如果您目前存在上面表格中的任何问题，您觉得这些问题对于做好您的工作、处理家庭事务或与人相处带来了多大的困难？",
                                list:[{ title:"完全没有困难",value:'a'},{ title:"有点困难",value:'b' },{ title:"很困难",value:'c' },{
                                    title:"极其困难",value:'d' }]};
                            that.lists.push(opopItem)
                        }
                        else if(allScore==0 && newVal.length==10){
                            that.lists.pop()
                        }
                    }
                }
            },
            deep:true
        }
    },
    computed:{
        ...mapGetters([
                'resechObj',
                'userIcon',
                'UserDic'
            ]),
        LASTTIME:function(){
            let dateAlary=new Date(this.userBasic.ExpectedDate)
            return new Date(dateForm(dateAlary.setMonth(dateAlary.getMonth()-9,dateAlary.getDate()-7)))
        },
        yunzhou:function(){
            return parseInt((WeeksBetw(new Date,this.LASTTIME))/7)
        },
        yuntianshu:function(){
            return parseInt((WeeksBetw(new Date,this.LASTTIME))%7)
        },
        birthWeek(){
            return parseInt((WeeksBetw(new Date,new Date(this.userBasic.ChildBirthDate)))/7)    
        },
        birthDay(){
            return parseInt((WeeksBetw(new Date,new Date(this.userBasic.ChildBirthDate)))%7)
        }
    },
    created() {
        
    },
    methods: {
         getChildAge2(val){ //获取儿童期2年龄
            return val && getChildAge2(val)
        },
        handleEdit(index,row){   //编辑
            let that=this;
            let isIndex=row.Type-1;   //0代表抑郁症    1代表爱丁堡  2代表焦虑
            that.lists=[]
            that.title=that.headerArr[isIndex]
            that.dialogTitle=that.titleArr[isIndex]
            that.dialogContent=that.contentArr[isIndex]
            if(row.FillInTime){
                that.lists=JSON.parse(row.ItemDetails)
            }
            else{
                that.lists=JSON.parse(JSON.stringify(healthJSON[isIndex]))
            }
            that.dataObj= {...row}
            that.dialogForm1=true;
        },
        changeRadio(item,index){   //change选中索引值，与前台保持一致
            item.AnswerIndex=index;
        },
        handleSure(){    //保存
            let that=this;
            let isLoad=that.lists.some((val)=>{
                return val.AnswerIndex==undefined
            })
            if(isLoad){
                that.$message({
                    type:'info',
                    message:'请填写完整'
                })
                return false
            }
            let allScore=0;
            that.lists.map(function(val,index){
                if(val.AnswerScore && !isNaN(val.AnswerScore)){
                    allScore+=parseInt(val.AnswerScore)
                }
            })
            delete that.dataObj.ItemDetails
            delete that.dataObj.Score
            that.service({
                url:'/ResearchObject/SaveMySelfAssessment',
                method:'post',
                data:{
                    ...that.dataObj,
                    ItemDetails:JSON.stringify(that.lists),
                    Score:allScore
                }
            }).then(response=>{
                that.$message({
                    message:'保存成功',
                    type:'success'
                })
                if(allScore>=10 && that.dataObj.Type==2){
                    that.CreateTable('PHQ-9抑郁症筛查量表',1)
                }
                that.dialogForm1=false
                that.getList()
            }).catch(err=>{
                console.log(err)
            })
        },
        handleSizeChange(val) {       //条数改变
            this.pageSize=val;
            this.getList()
        },
        handleCurrentChange(val) {    //页数改变
            this.pageId = val
            this.getList()
        },
        handleSizeChange1(val) {       //条数改变11
            this.pageSize1=val;
            this.getList()
        },
        CreateTable:function(value,type){
            let that=this;
            that.$confirm(`是否为该研究对象生成${value}`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.service({
                    url:'/ResearchObject/SaveMySelfAssessment',
                    method:'post',
                    data:{
                        Type:type,
                        ResearchObjectId:that.sysId,
                        Period:that.userBasic.Period,
                        Creater:this.userIcon,
                        CreaterId:JSON.parse(this.UserDic).SYS_ID,
                    }
                }).then(response=>{
                    that.$message({
                        message:'生成成功',
                        type:'success'
                    })
                    that.getList()
                }).catch(err=>{
                    console.log(err)
                })
            }).catch(() => {
                that.$message({
                    message:'已取消',
                    type:'info'
                })
            });
        },
        getList:function(){           //获取一级信息列表
            let that=this
            that.userBasic=''
            if(that.resechObj.mobile ||that.resechObj.researchNo){
                that.sysId='';
                that.mobile=that.resechObj.mobile;
                that.researchNo=that.resechObj.researchNo;
            }
            that.service({
                url:'/ResearchObject/GetParticipantDetail',
                method:'get',
                params:{
                    itemType:'9',
                    sysId:'',
                    period:'',
                    researchObjectId:that.sysId,
                    mobile:that.mobile,
                    researchNo:that.researchNo,
                    pageCount:(that.pageId-1),
                    pageSize:that.pageSize,
                }}).then(response=>{
                    response.dtData.dtBasic[0]?that.userBasic=response.dtData.dtBasic[0]:''
                    that.tableData=response.dtData.dtMySelfAssessment;
                }).catch(data=>{
            })
        },
    },
    mounted:function(){
        let that=this;
        that.sysId=that.$route.query.id;
        that.mobile=that.$route.query.mobile;
        that.researchNo=that.$route.query.researchNo;
        that.getList()
    },
    filters:{
        GroupType:function(val){
            if(val=='' ||val==undefined){
                return ''
            }
            return val=='1'?'A': 'B'
        },
         IntensityOfIntervention:function(val){
             return filterIntensityOfIntervention(val)
        },
        Period:function(val){
             return filterPeriod(val)
        },
         ChildSex(val){
	         return val=='1'?'男':val=='2'?'女':'未知'
        }    
    }
  }
function addZero(s){
    return s < 10 ? '0' + s: s;
}

function dateForm(data){   //日期格式化
    return   new Date(data).getFullYear()+'-'+addZero((new Date(data).getMonth()+1))+'-'+addZero(new Date(data).getDate())
}
function WeeksBetw(date1,date2) {  //计算日期之间相差得天数
    var _dt1=new Date(date1);
    var _dt2=new Date(date2);
    var dt1=_dt1.getTime();
    var dt2=_dt2.getTime();
    return parseInt(Math.abs(dt1- dt2)/1000/60/60/24);//这里是计算天数,如果想获得周数则在该返回值上再除以7
}

</script>
<style scoped lang="scss">
    .user-p1{
        .headerTop{
            margin-bottom: 30px;
            p{
                font-size:16px;
                margin-bottom: 15px;
                color:#303133;
                span{
                    padding:10px;
                }
                .span1{
                    margin-left: 25px;
                }}
            }
        .user-pi-ul{
            margin:0px auto 20px auto;
            li{
                float: left;
                width: 200px;
                margin-right: 20px;
            }
        }

    }
    .formX{
        .top{
            text-align: center;
        }
        ul{
            li{
                margin:20px;
                h3{
                    color: #606266;
                    font-weight: normal;
                }
                h5{
                    font-weight: normal;
                    margin:5px 0;
                }
                p{
                    color: #999999;
                    margin-bottom: 10px;
                }
            }
        }
    }
    .headerTop_ukl{
        /*border:1px solid #EDF1F7;*/
        padding:5px 20px 10px 0px;
        min-width: 800px;
        width:1000px;
        font-size:14px;
    ul{
    li{
        float: left;
        margin-right: 50px;
    .p1{
        color:#999999;
        padding-bottom:5px;
        display: inline-block;
    img{
        display: inline-block;margin-right: 10px;
    };

    }
    .p3{
        display: inline-block;
        padding-left: 10px;
        color: #666;
    }
    }
    }
    }
    .redspan{color: #fff;width: 30px;height: 25px;background: red;display: inline-block;line-height: 25px;}
    .grespan{color: #fff;width: 30px;height: 25px;background:#009900;display: inline-block;line-height: 25px;}
    .twospan{color: #fff;width: 30px;height: 25px;background:#FC9804;display: inline-block;line-height: 25px;}
    .thrspan{color: #7A6266;width: 30px;height: 25px;background:#FFFF00;display: inline-block;line-height: 25px;}
    .fourspan{color: #fff;width: 30px;height: 25px;background:#92D050;display: inline-block;line-height: 25px;}
    .center-waps{margin:15px 0px;}
    .dialog-div{margin:20px 5%}
    .dialog-p1{margin:10px 0px;font-size: 16px;}
    .dialog-p-title{color: #999999;margin:15px 0px;}
</style>

